<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <script src="./lib/vue.js"></script>
        <title>06 vue购物车</title>
    </head>
    <body>
        <div id="app">
            <input type="checkbox" name="all" id="all" v-model="isAllCheked" @change="handleAllCheked" />
            全选
            <ul>
                <li v-for="(good, index) in goodList">
                    <input type="checkbox" name="gwc" :id="'good_' + good.id" :value="good" v-model="gwcCheked" @change="handleCheked()" />
                    {{ good }}&nbsp;&nbsp;
                    <button @click="handleChangeNum('add', good)">+</button>
                    &nbsp;&nbsp;{{ good.number }}&nbsp;&nbsp;
                    <button @click="handleChangeNum('minus', good)">-</button>
                </li>
            </ul>
            <p>总价计算：{{ getSum() }}</p>
        </div>

        <script>
            const vm = new Vue({
                el: '#app',
                data() {
                    return {
                        gwcCheked: [],
                        goodList: [
                            { id: 1001, name: 'iphone', price: 10000, number: 2 },
                            { id: 1002, name: 'ipad', price: 20000, number: 1 },
                            { id: 1003, name: 'macbook', price: 30000, number: 3 }
                        ],
                        isAllCheked: false
                    };
                },
                methods: {
                    getSum() {
                        let sum = 0;
                        this.gwcCheked.forEach((element) => {
                            sum += element.price * element.number;
                        });
                        return sum;
                    },
                    handleAllCheked() {
                        let arr = [];
                        if (this.isAllCheked) {
                            this.goodList.forEach((item) => {
                                arr.push(item);
                            });
                            this.gwcCheked = arr;
                        } else {
                            this.gwcCheked = [];
                        }
                    },
                    handleCheked(good) {
                        //操作物品数量后自动勾选物品，同时判断数量为0删除物品
                        if (good) {
                            let goodChecked = false;
                            let checkedIndex = -1;
                            this.gwcCheked.forEach((checked, index) => {
                                if (checked.id === good.id) {
                                    goodChecked = true;
                                    checkedIndex = index;
                                }
                            });
                            if (!goodChecked) {
                                this.gwcCheked.push(good);
                            }
                            this.isDelGood(good, checkedIndex);
                        }
                        //判断是否勾选全选
                        if (this.gwcCheked.length === this.goodList.length) {
                            this.isAllCheked = true;
                        } else {
                            this.isAllCheked = false;
                        }
                    },
                    handleChangeNum(option, good) {
                        if (option === 'add') {
                            good.number++;
                            this.handleCheked(good);
                        } else {
                            good.number > 0 ? good.number-- : (good.number = 0);
                            this.handleCheked(good);
                        }
                    },
                    isDelGood(good, checkedIndex) {
                        if (good.number === 0) {
                            if (confirm('商品数量为0将在购物车中移除，您确定要移除它吗？')) {
                                this.goodList.forEach((item, index) => {
                                    if (item.id === good.id) {
                                        this.goodList.splice(index, 1);
                                        this.gwcCheked.splice(checkedIndex, 1);
                                    }
                                });
                            } else {
                                good.number = 1;
                            }
                        }
                    }
                }
            });
        </script>
    </body>
</html>
